<template>
	<view class="class-overview">
		<view class="class-overview-top">
			<view class="top-box">
				<view @click="mostselectItem(index,item)" v-for="(item,index) in mostList" :key="index" :class="[item.isSelect?'top-box-item-active':'top-box-item']">
					<text>{{item.name}}</text>
				</view>
			</view>
			<view class="top-box">
				<view class="top-box-item" v-for="(item,index) in titleList" :key="index" @click="titleselectItem(index,item)"
				 :class="[item.isSelect?'top-box-item-active':'top-box-item']">
					<text>{{item.name}}</text>
				</view>
			</view>
			<view class="top-box">
				<view class="top-box-item" v-for="(item,index) in typeList" :key="index" :class="[item.isSelect?'top-box-item-active':'top-box-item']"
				 @click="typeselectItem(index,item)">
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		<view class="content">
			<you-scroll ref="scroll" :fetch="getClassList">
				<view slot-scope="{row,index}" @click="goDetailPage(row,index)">
					<class-list-item :row="row"></class-list-item>
				</view>
			</you-scroll>
		</view>
	</view>
</template>

<script>
	import youScroll from '@/components/uni-list-scroll/you-scroll'
	import ClassListItem from './components/ClassListItem.vue'
	import {
		getSortList,
		getClassList
	} from '@/static/js/api/home.js';
	import request from '@/static/js/request.js';
	var self;
	export default {
		components: {
			youScroll,
			ClassListItem
		},
		data() {
			return {
				mostList: [{
						name: "最新",
						isSelect: true
					},
					{
						name: "最热",
						isSelect: false
					},
				],
				titleList: [],
				typeList: [],
				mostLastIndex: 0,
				typeLastIndex: 0,
				titleLastIndex: 0,
				selectName: ''
			}
		},
		onLoad(option) {
			this.getSortList();
			this.selectName = option.select;
		},
		mounted() {
			self = this;
		},
		methods: {
			getSortList() {
				let self = this;
				getSortList().then(res => {
					this.titleList = (res.data[0].subject.map(m => {
						return {
							...m,
							isSelect: false
						}
					}));
					this.titleList.unshift({
						name: "全部",
						isSelect: true
					})
					this.typeList = (res.data[0].category.map(m => {
						return {
							...m,
							isSelect: false
						}
					}));
					this.typeList.unshift({
						name: "全部",
						isSelect: true
					});
					if (this.selectName != '全部分类') {
						this.titleList.forEach((item, index) => {
							if (this.selectName == item.name) {
								item.isSelect = true;
								this.titleLastIndex = index;
							} else {
								item.isSelect = false
							}
						})
					}
					self.$refs.scroll.loadData();
				})
			},
			getClassList(pageIndex, pageSize) {
				let url = request.getBaseUrl();
				let subject_id = self.titleList.filter(f => {
					return f.isSelect
				})[0].id;
				let categ_id = self.typeList.filter(f => {
					return f.isSelect
				})[0].id;
				let order = '';
				if (self.mostLastIndex == 0) {
					order = 'create_date desc'
				} else {
					order = 'click desc'
				}
				let domain = `[('categ_id','in',[7,8,9]),${subject_id?`('subject_id','=',${subject_id}),`:''}${categ_id?`('categ_id','=',${categ_id})`:''}]`
				return getClassList(pageIndex, pageSize, domain, order).then(res => {
					res.data = res.data.map(m => {
						let urlImage = url + m.url_images
						return {
							urlImage,
							...m
						}
					})
					return res.data;
				})
			},
			goDetailPage(item, index) {
				uni.navigateTo({
					url: `/pages/home/class/ClassDetailPage?id=${item.id}`
				})
			},
			mostselectItem(index, item) {
				if (index == this.mostLastIndex) {

				} else {
					this.mostList[this.mostLastIndex].isSelect = false;
					item.isSelect = true;
					this.mostLastIndex = index;
					this.$refs.scroll.loadData();
				}
			},
			titleselectItem(index, item) {

				if (index == this.titleLastIndex) {

				} else {
					this.titleList[this.titleLastIndex].isSelect = false;
					item.isSelect = true;
					this.titleLastIndex = index;
					this.$refs.scroll.loadData();
				}
			},
			typeselectItem(index, item) {
				if (index == this.typeLastIndex) {

				} else {
					this.typeList[this.typeLastIndex].isSelect = false;
					item.isSelect = true;
					this.typeLastIndex = index;
					this.$refs.scroll.loadData();
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.class-overview {
		overflow: hidden;
		/* #ifdef MP-WEIXIN*/
		height: 100vh;
		/* #endif */
		/* #ifdef H5*/
		height: calc(100vh - 88rpx);
		/* #endif */
		position: relative;
		background: #F4F5F9;

		.class-overview-top {
			background: #FFFFFF;
			padding: 30rpx 0rpx 30rpx 32rpx;
			margin-bottom: 20rpx;
			position: absolute;
			top: 0;
			right: 0;
			left: 0;

			.top-box:last-child {
				margin-bottom: 0rpx;
			}

			.top-box {
				display: flex;
				text-align: center;
				align-items: center;
				margin-bottom: 30rpx;

				.top-box-item {
					width: 144rpx;
					height: 70rpx;
					border-radius: 6rpx;
					font-size: 30rpx;
					font-weight: 400;
					color: #333333;
					line-height: 70rpx;
					margin-right: 40rpx;
					white-space: nowrap;
				}

				.top-box-item-active {
					width: 144rpx;
					height: 70rpx;
					background: #EFF0F1;
					border-radius: 6rpx;
					font-size: 30rpx;
					font-weight: 400;
					color: #B8212B;
					line-height: 70rpx;
					margin-right: 40rpx;
				}

				.top-box-item-active:last-child {
					margin-right: 0rpx;
				}

				.top-box-item:last-child {
					margin-right: 0rpx;
				}
			}
		}

		.content {
			background: #FFFFFF;
			height: calc(100vh - 350rpx);
			// padding-top: 20rpx;
			margin-top: 350rpx;

			.video-item {
				padding: 20rpx 14rpx;
				display: flex;
				align-items: center;

				.video-item-image {
					width: 226rpx;
					height: 168rpx;
					background-size: 100% 100%;
					background-repeat: no-repeat;
					position: relative;

					image {
						width: 48rpx;
						height: 48rpx;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}
				}

				.video-content {
					flex: 1;
					margin-left: 23rpx;

					.video-word {
						word-break: break-all;
						text-overflow: ellipsis;
						overflow: hidden;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						margin-bottom: 84rpx;
						font-size: 32rpx;
						font-weight: 400;
						color: #333333;
						line-height: 44rpx;
					}

					.video-remarks {
						display: flex;
						text-align: center;
						align-items: center;
						font-size: 28rpx;
						font-weight: 400;
						color: #666666;
						line-height: 40rpx;

						.video-time {
							flex: 1;
							text-align: left;
						}

						.video-eye {
							width: 30rpx;
							height: 22rpx;
							margin-right: 14rpx;
						}

						.video-value {

							color: #999999;
						}
					}
				}
			}
		}
	}
</style>
